<template>
  <div class="box">
    <div class="page__bd page__bd_spacing">
      <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" @change="swiperChange" @animationfinish="animationfinish">
        <div v-for="(item, index) in imgUrls" :key="index">
          <swiper-item>
            <image src="http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg" class="slide-image" mode="widthFix"/>
          </swiper-item>
        </div>
      </swiper>
      <div class="search-box">
        <img src="../../../static/images/index-search.png" mode="widthFix" alt/>
      </div>
    </div>
    <div class="nav-box">
      <ul>
        <li v-for="(nav, i) in navList" :key="i" :class="{hot:nav.isHot}">
          <navigator :url="baseUrl+ 'url'">
            <div class="img-box">
              <img :src="nav.src" alt mode="widthFix"/>
            </div>
            <span>{{nav.title}}</span>
          </navigator>
        </li>
      </ul>
    </div>
    <div class="img-nav">
      <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" @change="swiperChange" @animationfinish="animationfinish">
        <div v-for="(item, index) in indexNav" :key="index">
          <swiper-item>
            <image :src="item" class="slide-image" mode="widthFix"/>
          </swiper-item>
        </div>
      </swiper>
    </div>
    <div class="recommend-box">
      <h3>火爆推荐</h3>
      <ul class="product-list">
        <li v-for="(item,index) in recommendItems" mode="widthFix" :key="index">
          <!--<i><img :src="item.picture" alt=""  mode="widthFix" /></i>-->
          <i><img src="http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg" alt=""  mode="widthFix" /></i>
          <div>
            <div class="title-box">
              <h5 class="multi-line">{{item.title}}</h5>
              <p>已售：{{item.orderCount}}</p>
            </div>
            <div class="price-box">
              <div>
                <i>￥</i>
                <b>{{item.price}}</b>
                <span>.{{item.point}}</span>
              </div>
              <del>￥{{item.oldPrice}}</del>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import introduce from "../../../static/images/nav-introduce.png";
  import ticket from "../../../static/images/nav-ticket.png";
  import hotel from "../../../static/images/nav-hotel.png";
  import specialty from "../../../static/images/nav-specialty.png";
  import navigation from "../../../static/images/nav-navigation.png";
  import tour from "../../../static/images/nav-tour.png";
  import strategy from "../../../static/images/nav-strategy.png";
  import weather from "../../../static/images/nav-weather.png";
  import opinion from "../../../static/images/nav-opinion.png";
  import center from "../../../static/images/nav-center.png";

  //导航图片
  import indexNavSrc from "../../../static/images/index-nav.png";

  export default {
    name: "Home",
    data() {
      return {
        baseUrl: this.$baseUrl,
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 900,
        circular: true,
        imgUrls: [
          // 'http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg',
          "http://wx.v4.yunyouyuanfang.com/travel_v4//9d16530903a54814b36d0b8df74d3047.jpg"
        ], //轮播
        navList: [],
        iconPath: {
          introduce: introduce,
          ticket: ticket,
          hotel: hotel,
          specialty: specialty,
          navigation: navigation,
          tour: tour,
          strategy: strategy,
          weather: weather,
          opinion: opinion,
          center: center
        },
        indexNav: [
          indexNavSrc, indexNavSrc
        ],
        recommendItems:[],//火爆推荐
      };
    },
    onLoad() {
      this.getTemplateData()
    },
    onShow() {
      this.getRecommend()
    },
    methods: {
      getTemplateData() {
        let _that = this
        console.log(this.iconPath)
        wx.request({
          url: this.$baseUrl + "/getTemplateData",
          method: 'get',
          success: function (res) {
            let object = res.data.object
            let menuList = object.template.menuList
            for (let key in menuList) {
                let src = menuList[key].code
              if (src == 'introduce') {
                menuList[key].src = '/static/images/nav-introduce.png'
              } else if (key == 'ticket') {
                menuList[key].src = '/static/images/nav-ticket.png'
              } else if (key == 'hotel') {
                menuList[key].src = '/static/images/nav-hotel.png'
              } else if (key == 'specialty') {
                menuList[key].src = '/static/images/nav-specialty.png'
              } else if (key == 'navigation') {
                menuList[key].src = '/static/images/nav-navigation.png'
              } else if (key == 'tour') {
                menuList[key].src = '/static/images/nav-tour.png'
              } else if (key == 'strategy') {
                menuList[key].src = '/static/images/nav-strategy.png'
              } else if (key == 'weather') {
                menuList[key].src = '/static/images/nav-weather.png'
              } else if (key == 'opinion') {
                menuList[key].src = '/static/images/nav-opinion.png'
              } else if (key == 'center') {
                menuList[key].src = '/static/images/nav-center.png'
              }
              menuList[key].isHot = menuList[key].code == "strategy" ? true : false
            }
            _that.navList = menuList
            _that.imgUrls = object.images
          }
        })
      },
      getRecommend() {
        let _that = this
        wx.request({
          url: this.$baseUrl + "/jsapi/getRecommend",
          success: function (res) {
            let list = res.data.object
            for (let key in list) {
              let money = list[key].todayMinPrice.toFixed(1).split('.')
              list[key].price = money[0]
              list[key].point = money[1]
              delete list[key].todayMinPrice
            }
            _that.recommendItems = list
          }
        })
      },
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../static/css/basis";
  @import "../../../static/css/product";
  swiper {
    /*height: 422rpx;*/
    .slide-image {
      width: 100%;
    }
  }

  .search-box {
    position: fixed;
    top: 20rpx;
    right: 30rpx;
    width: 63rpx;
    z-index: 20;
  }

  .nav-box {
    position: relative;
    z-index: 10;
    margin-top: -100rpx;
    padding: 0 20rpx;

    > ul {
      display: flex;
      flex-wrap: wrap;
      /*justify-content: space-between;*/
      padding: 20rpx 10rpx;
      background: linear-gradient(
          0deg,
          rgba(245, 246, 247, 1) 0%,
          rgba(221, 249, 237, 1) 100%
      );
      border-radius: 40rpx 40rpx 0 0;

      > li {
        width: 20%;
        padding: 20rpx 18rpx;
        text-align: center;

        &:nth-last-child( -n + 5) {
          img {
            width: 48rpx;
            margin: 0 auto;
          }
        }

        &.hot {
          position: relative;

          &:before {
            content: '热门';
            position: absolute;
            top: 4rpx;
            right: 10rpx;
            width: 54rpx;
            height: 28rpx;
            background: rgba(232, 69, 43, 1);
            border-radius: 14rpx 14rpx 14rpx 2rpx;
            color: #fff;
            line-height: 28rpx;
            font-size: 18rpx;
          }
        }

        span {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }

  .img-nav {
    margin: 30rpx;

    swiper {
      height: 188rpx;
      border-radius: 10rpx;
      overflow: hidden;
    }
  }
  .recommend-box {
    margin: 0 30rpx;
    h3{
      margin: 60rpx 0;
      font-size: 42rpx;
      color: #333;
    }
  }
</style>
